<template>
    <view class="page-wrapper">
        <view class="title-wrapper">
            <view class="title">选择渠道</view>
        </view>
        <view class="selected-wrapper" @tap="toAddPage">
            <text v-if="!vdata.ifCode">请选择渠道</text>
            <view class="ifcode-info" v-else>
                <view class="ifcode-title">{{ vdata.ifName }}</view>
                <view class="ifcode-code">{{ vdata.ifCode }}</view>
            </view>
            <image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
        </view>
        <view class="title-wrapper">
            <view class="title">自动配置到应用</view>
            <JSwitch :bol="vdata.isShow" :confirmTips="false" @confirm="changeShow" />
        </view>
        <view class="selected-wrapper selected-appId" :class="{ 'hide-appId': !vdata.isShow }">
            <JeepayBizsPopupView :hasTitle="false" bizType="mchApp" v-model:value="vdata.appId"
                :showName="vdata.bindAppName" :isIcon="false" />
            <image src="/static/iconImg/icon-arrow-right.svg" class="arrow" />
        </view>
        <view class="next-but">
            <Button @tap="queryMchAppPayPassage">下一步</Button>
        </view>
    </view>
    <!-- 选择支付 接口 -->
    <JeepayPopupListSelect ref="selectIfcodeRef" title='请选择渠道' :reqTableDataFunc="reqTableDataByIfcodeFunc"
        :fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }" @confirm="confirmIfCode">

        <!-- 小程序， 插槽不生效， 待排查！  TODO -->
        <!-- 详见： https://ask.dcloud.net.cn/question/158765  -->
        <!-- JeepayPopupListSelect.js  修改 "content-" + i0,  改为： content 即可。    -->

        <!-- #ifdef APP-PLUS || H5 -->
        <template #content="{ record }">
            <view class="pay-wrapper">
                <view class="pay-info">
                    <view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
                        <image :src="record.icon" mode="scaleToFill" />
                    </view>
                    <view>
                        <view class="pay-title">{{ record.ifName }}</view>
                    </view>
                </view>
            </view>
        </template>
        <!-- #endif -->

    </JeepayPopupListSelect>
</template>

<script setup>
import { reactive, ref } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import ak from '@/commons/utils/ak.js'
import { reqLoad, $getMchPayPassage, $getAllAllowApplymentIfCodeList, API_URL_MCH_APP_LIST } from "@/http/apiManager.js"
onLoad((options) => {
    if (options.applyId) vdata.applyId = options.applyId
})
const vdata = reactive({
    isShow: true,
    appId: ''
})
const statePopup = ref(null)
const jeepayTableListRef = ref()
const selectIfcodeRef = ref()
// 打开选择渠道页面
function toAddPage () {

    $getAllAllowApplymentIfCodeList().then(({ bizData }) => {
        vdata.addIfCodeList = bizData.filter(v => {
            return v.isOpenApplyment == 1
        })
        selectIfcodeRef.value.open()
    })
}
// 查询默认 应用
const findDefaultMchApp = () => {
    reqLoad.list(API_URL_MCH_APP_LIST, { defaultFlag: 1 }).then(({ bizData }) => {
        vdata.bindAppName = bizData.records[0].appName
        vdata.appId = bizData.records[0].appId
    })
}
findDefaultMchApp()
// 请求可以选择的支付渠道 
function reqTableDataByIfcodeFunc () {
    // 模拟请求数据 
    return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } })
}
// 查询商户支付应用参数是否配置
function queryMchAppPayPassage () {
    $getMchPayPassage(vdata.appId, vdata.ifCode).then(({ bizData }) => {
        if (bizData && bizData.existMchParams && vdata.isShow) {
            uni.showModal({
                title: '注意',
                content: `当前所选应用已在渠道【${vdata.ifName}】配置参数、费率，该笔进件成功后将自动覆盖原有配置，或将导致原有支付功能失效，请谨慎提交。`,
                success: (res) => {
                    if (res.confirm) {
                        ak.go.to('PAGES_APPLYMENT_H5_DETAIL', { isView: 0, ifCode: vdata.ifCode, appId: vdata.isShow ? vdata.appId : '', copyInfoSourceApplyId: vdata.applyId ? vdata.applyId : '' })
                    }
                }
            })
        }else{
            ak.go.to('PAGES_APPLYMENT_H5_DETAIL', { isView: 0, ifCode: vdata.ifCode, appId: vdata.isShow ? vdata.appId : '', copyInfoSourceApplyId: vdata.applyId ? vdata.applyId : '' })
        }
    })
}
const changeShow = (e) => {
    console.log(e);
    vdata.isShow = e
}
// 选择支付渠道
function confirmIfCode (selected) {
    Object.assign(vdata, selected)
    selectIfcodeRef.value.close()
}
</script>

<style lang="scss" scoped>
.page-wrapper {
    padding-top: 60rpx;
    min-height: 100vh;

    .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto 20rpx;
        padding: 0 0 0 30rpx;
        box-sizing: border-box;
        width: 670rpx;

        .title {
            font-size: 32rpx;
        }
    }

    .selected-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto 120rpx;
        padding: 0 0 0 30rpx;
        box-sizing: border-box;
        width: 670rpx;
        min-height: 120rpx;
        border-radius: 20rpx;
        background-color: #fff;

        .arrow {
            width: 100rpx;
            height: 100rpx;
        }

        .ifcode-info {
            padding-top: 20rpx;

            .ifcode-code {
                padding: 15rpx 0 20rpx;
                font-size: 30rpx;
                color: #a1a1a1;
            }
        }
    }

    .selected-appId {
        padding-bottom: 25rpx;
    }

    .next-but {
        padding-top: 80rpx;
        width: 670rpx;
        margin: 0 auto;
    }
}


.hide-appId {
    margin-bottom: 110rpx;
    padding: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden;
}
</style>